<template>
	<view>
		<view style="padding: 20rpx;">
			<u-swiper :list="rotationChartList" height="200" circular indicator keyName="imgUrl"></u-swiper>
		</view>
		<view style="display: flex;align-items: center;justify-content: center;">
			<u-divider text="校园服务大厅" style="width: 360rpx;" textColor="#000000" lineColor="#000000"></u-divider>
		</view>
		<u-grid :border="false"  border style="border-top: 1px solid #EEEFF2;">
			<u-grid-item v-for="(item,index) in serviceList" :key="index" class="list-item">
				<img :src="item.thumbnail" alt="" class="thumbnail"/>
				<text class="grid-text">{{item.title}}</text>
			</u-grid-item>
		</u-grid>
	</view>
</template>

<script>
	import mock from './mock.js'
	export default {
		data() {
			return {
				rotationChartList:[],
				serviceList:[]
			};
		},
		onLoad() {
			this.rotationChartList = mock.data.rotationChartList
			this.serviceList = mock.data.serviceItemsList
		}
	
	}
</script>

<style lang="scss" scoped>
	.list-item {
		padding: 30rpx 0;
	}
	.thumbnail {
		width: 80rpx;
		margin-bottom: 20rpx;
	}
	.grid-text {
		font-size: 26rpx;
	}
</style>